<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改名片</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>修改名片</h1>
<form th:action="@{/card/update(id=${card.id})}" th:object="${card}" method="post">
    <input type="hidden" id="id" name="id" th:value="${card.id}">
    <label for="name">姓名:</label><input type="text" id="name" name="name" th:value="${card.name}"><br>
    <label for="telephone">电话:</label><input type="text" id="telephone" name="telephone" th:value="${card.telephone}"><br>
    <label for="email">邮箱:</label><input type="text" id="email" name="email" th:value="${card.email}"><br>
    <label for="company">单位:</label><input type="text" id="company" name="company" th:value="${card.company}"><br>
    <label for="post">职务:</label><input type="text" id="post" name="post" th:value="${card.post}"><br>
    <label for="address">地址:</label><input type="text" id="address" name="address" th:value="${card.address}"><br>
    <label for="logoName">Logo:</label><input type="text" id="logoName" name="logoName" th:value="${card.logoName}"><br>
    <button type="submit" onclick="submitForm()">修改</button>
</form>
<a th:href="@{/card/main}">返回</a>

<script>
    function submitForm() {
        var formData = new FormData(document.getElementById('editForm'));

        $.ajax({
            url: 'card/update',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {
                alert('名片修改成功');
                window.location.href = 'card/main';
            },
            error: function (xhr, status, error) {
                alert('名片修改失败: ' + error);
            }
        });
    }
</script>
</body>
</html>
